var sliderController = new function(){

	this.positionXSlidder;
	this.positionYSlidder;
	this.scaleXSlidder;
	this.scaleYSlidder;
	this.angleSlidder;
	this.numericPositionX;
	this.numericPositionY;
	this.numericScaleX;
	this.numericScaleY;
	this.numericAngle;
	this.checkboxDraggable;
	this.checkboxTouchable;
	this.inputName;
	this.inputZindex;
	this.inputGroup;
	this.initState;
	this.numericOpacity;
	this.opacitySlidder;
	this.container;
	
	
	function _init(){
		
		sliderController.container = $('#rightPanel');
        
        $("#sliderPositionX").kendoSlider({
            change: sliderPositionXOnChange,
            slide: sliderPositionXOnChange,
            min: -2000,
            max: 2000,
            smallStep: 1,
            largeStep: 10,
        });   
        
        this.positionXSlidder = $("#sliderPositionX").data("kendoSlider");
            
        $("#sliderPositionY").kendoSlider({
            change: sliderPositionYOnChange,
            slide: sliderPositionYOnChange,
            min: -2000,
            max: 2000,
            smallStep: 1,
            largeStep: 10,
        }); 
        
        this.positionYSlidder = $("#sliderPositionY").data("kendoSlider");
        
        $("#sliderScaleX").kendoSlider({
            change: sliderScaleXOnChange,
            slide: sliderScaleXOnChange,
            min: 0.1,
            max: 10,
            smallStep: 0.1,
            largeStep: 1,
            value: 1
        }); 
    
        this.scaleXSlidder = $("#sliderScaleX").data("kendoSlider");
    
	    $("#sliderScaleY").kendoSlider({
	        change: sliderScaleYOnChange,
	        slide: sliderScaleYOnChange,
	        min: 0.1,
	        max: 10,
	        smallStep: 0.1,
	        largeStep: 1,
	        value: 1
	    }); 
	
	    this.scaleYSlidder = $("#sliderScaleY").data("kendoSlider");
	    
	    $("#sliderAngle").kendoSlider({
	        change: sliderAngleOnChange,
	        slide: sliderAngleOnChange,
	        min: -360,
	        max: 360,
	        smallStep: 1,
	        largeStep: 10,
	        value: 0
	    }); 
	
	    this.angleSlidder = $("#sliderAngle").data("kendoSlider");
	    
	    $("#sliderOpacity").kendoSlider({
	        change: sliderOpacityOnChange,
	        slide: sliderOpacityOnChange,
	        min: 0,
	        max: 1,
	        smallStep: 0.01,
	        largeStep: 0.1,
	        value: 1
	    }); 
	
	    this.opacitySlidder = $("#sliderOpacity").data("kendoSlider");
        
	    // create NumericTextBox from input HTML element using custom format
        $("#numericPositionX").kendoNumericTextBox({
            format: "#px",
            min: -2000,
            max: 2000,
            step: 1,
            decimals: 0,
            change: numericPositionXOnChange,
            spin: numericPositionXOnChange
        });
        
        this.numericPositionX = $("#numericPositionX").data("kendoNumericTextBox");
        
        $("#numericPositionY").kendoNumericTextBox({
            format: "#px",
            min: -2000,
            max: 2000,
            step: 1,
            decimals: 0,
            change: numericPositionYOnChange,
            spin: numericPositionYOnChange
        });

        this.numericPositionY = $("#numericPositionY").data("kendoNumericTextBox");
        
        $("#numericScaleX").kendoNumericTextBox({
        	format: "#.#",
            decimals: 1,
            min: 0.1,
            max: 10,
            step: 0.1,
            change: numericScaleXOnChange,
            spin: numericScaleXOnChange
        });
        
        this.numericScaleX = $("#numericScaleX").data("kendoNumericTextBox");
        
        $("#numericScaleY").kendoNumericTextBox({
        	format: "#.#",
            decimals: 1,
            min: 0.1,
            max: 10,
            step: 0.1,
            change: numericScaleYOnChange,
            spin: numericScaleYOnChange
        });
        
        this.numericScaleY = $("#numericScaleY").data("kendoNumericTextBox");
        
        $("#numericAngle").kendoNumericTextBox({
            format: "#º",
            decimals: 0,
            min: -360,
            max: 360,
            step: 1,
            change: numericAngleOnChange,
            spin: numericAngleOnChange
        });

        this.numericAngle = $("#numericAngle").data("kendoNumericTextBox");
        
        this.checkboxDraggable = $("#checkboxDraggable");
        checkboxDraggableOnChange();
        
        this.checkboxTouchable = $("#checkboxTouchable");
        checkboxTouchableOnChange();
        
        this.inputName = $("#inputName");
        inputNameOnChange();
        
        $("#zindex").kendoNumericTextBox({
        	decimals: 0,
            value: 0,
            format: '#',
            step: 1,
            change: inputZindexOnChange,
            spin: inputZindexOnChange
        });
        
        this.inputZindex = $("#zindex").data("kendoNumericTextBox");
        
        this.inputGroup = $('#group-input');
        inputGroupOnChange();
        
        this.initState = $('#initial-state');
        inputStateOnChange();
        
        $("#numericOpacity").kendoNumericTextBox({
        	min: 0,
            max: 1,
            step: 0.01,
            decimals: 2,
            value: 1,
            format: '#.00',
            change: numericOpacityOnChange,
            spin: numericOpacityOnChange
        });
        
        this.numericOpacity = $("#numericOpacity").data("kendoNumericTextBox");
        
        _disableAll()
	}
	
	function _updateControls() {

		//Actualizar los controles que pueden cambiar al interactuar con el canvas
		if (mainCanvas.canvas.getActiveObject()){
		
			sliderController.positionXSlidder.value(mainCanvas.canvas.getActiveObject().getLeft() / deviceController.canvasRatio);
			sliderController.positionYSlidder.value(mainCanvas.canvas.getActiveObject().getTop() / deviceController.canvasRatio);
			sliderController.scaleXSlidder.value(mainCanvas.canvas.getActiveObject().getScaleX() / deviceController.canvasRatio);
			sliderController.scaleYSlidder.value(mainCanvas.canvas.getActiveObject().getScaleY() / deviceController.canvasRatio);
			sliderController.angleSlidder.value(mainCanvas.canvas.getActiveObject().getAngle());
			sliderController.numericPositionX.value(mainCanvas.canvas.getActiveObject().getLeft() / deviceController.canvasRatio);
			sliderController.numericPositionY.value(mainCanvas.canvas.getActiveObject().getTop() / deviceController.canvasRatio);
			sliderController.numericScaleX.value(mainCanvas.canvas.getActiveObject().getScaleX() / deviceController.canvasRatio);
			sliderController.numericScaleY.value(mainCanvas.canvas.getActiveObject().getScaleY() / deviceController.canvasRatio);
			sliderController.numericAngle.value(mainCanvas.canvas.getActiveObject().getAngle());
		}
		
		//Deshabilitar elementos no válidos para grupos
		if(mainCanvas.canvas.getActiveGroup()){
			
			sliderController.inputName.attr("value","").attr('disabled',true);
			sliderController.inputZindex.value('');
			sliderController.inputZindex.enable(false);
			sliderController.checkboxDraggable.attr("checked",false).attr('disabled',true);
			sliderController.checkboxTouchable.attr("checked",false).attr('disabled',true);
			sliderController.inputGroup.attr("value","").attr('disabled',true);
			stateController.setValue("").enable(false);
			sliderController.numericOpacity.value('')
			sliderController.numericOpacity.enable(false);
		}
		
		//Retomar elementos de objetos cuando vuelven a ser seleccionados
		else {
			
			sliderController.inputName
				.attr("value",leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).text)
				.attr('disabled',false);
			
			sliderController.inputZindex.value(leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).imageObj.get('zindex'));
			sliderController.inputZindex.enable();
			
			sliderController.checkboxDraggable
				.attr("checked",leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).draggable)
				.attr('disabled',false);
			
			sliderController.checkboxTouchable
				.attr("checked",leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).touchable)
				.attr('disabled',false);
			
			sliderController.inputGroup
				.attr("value",leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).group)
				.attr('disabled',false);
			
			stateController
				.setValue(leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).initState)
				.enable(true);
			
			sliderController.numericOpacity.value(mainCanvas.canvas.getActiveObject().getOpacity());
			sliderController.numericOpacity.enable(true);
			sliderController.opacitySlidder.value(mainCanvas.canvas.getActiveObject().getOpacity());
		}
		
	} 
	
	function sliderPositionXOnChange(e) {
    	mainCanvas.canvas.getActiveObject().setLeft(e.value * deviceController.canvasRatio).setCoords();
    	_updateControls();
		mainCanvas.canvas.renderAll();
    }
    
    function sliderPositionYOnChange(e) {
		mainCanvas.canvas.getActiveObject().setTop(e.value * deviceController.canvasRatio).setCoords();
		_updateControls();
		mainCanvas.canvas.renderAll();
    }

    function sliderScaleXOnChange(e) {
    	mainCanvas.canvas.getActiveObject().setScaleX(e.value * deviceController.canvasRatio).setCoords();
    	_updateControls();
		mainCanvas.canvas.renderAll();
    }
    
    function sliderScaleYOnChange(e) {
    	mainCanvas.canvas.getActiveObject().setScaleY(e.value * deviceController.canvasRatio).setCoords();
    	_updateControls();
		mainCanvas.canvas.renderAll();
    }
    
    function sliderAngleOnChange(e) {
    	mainCanvas.canvas.getActiveObject().setAngle(e.value);	
    	_updateControls();
		mainCanvas.canvas.renderAll();
    }
    
    function sliderOpacityOnChange(e){
    	mainCanvas.canvas.getActiveObject().setOpacity(e.value);	
    	_updateControls();
		mainCanvas.canvas.renderAll();
    }
    
    function numericPositionXOnChange(){
    	$("#numericPositionX").blur();
    	if (mainCanvas.canvas.getActiveObject()){
    		mainCanvas.canvas.getActiveObject().setLeft(sliderController.numericPositionX.value() * deviceController.canvasRatio).setCoords();
    		_updateControls();
    		mainCanvas.canvas.renderAll();
    	}
    }
    
    function numericPositionYOnChange(){
    	$("#numericPositionY").blur();
    	if (mainCanvas.canvas.getActiveObject()){
	    	mainCanvas.canvas.getActiveObject().setTop(sliderController.numericPositionY.value() * deviceController.canvasRatio).setCoords();	
	    	_updateControls();
			mainCanvas.canvas.renderAll();
    	}
    }
    
    function numericScaleXOnChange(){
    	$("#numericScaleX").blur();
    	if (mainCanvas.canvas.getActiveObject()){
    		mainCanvas.canvas.getActiveObject().set('scaleX', sliderController.numericScaleX.value() * deviceController.canvasRatio).setCoords();
    		_updateControls();
    		mainCanvas.canvas.renderAll();
    	}
    }
    
    function numericScaleYOnChange(){
    	$("#numericScaleY").blur();
    	if (mainCanvas.canvas.getActiveObject()){
	    	mainCanvas.canvas.getActiveObject().set('scaleY', sliderController.numericScaleY.value() * deviceController.canvasRatio).setCoords();	
	    	_updateControls();
			mainCanvas.canvas.renderAll();
    	}
    }
    
    function numericAngleOnChange(e){
    	$("#numericAngle").blur();
    	if (mainCanvas.canvas.getActiveObject()){
	    	mainCanvas.canvas.getActiveObject().setAngle(sliderController.numericAngle.value());	
	    	_updateControls();
			mainCanvas.canvas.renderAll();
    	}
    }
    
    function checkboxDraggableOnChange(){
    	sliderController.checkboxDraggable.click(function(){
    		if(sliderController.checkboxDraggable.is(':checked')) {  
    			leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).draggable = true;
            } else {  
            	leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).draggable = false;
            }     		
    	})
    			
    }
    
    function checkboxTouchableOnChange(){    	
    	sliderController.checkboxTouchable.click(function(){
    		if(sliderController.checkboxTouchable.is(':checked')) {  
    			leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).touchable = true;
            } else {  
            	leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).touchable = false;
            }     		
    	})
    		
    }
    
    function inputNameOnChange(){
    	sliderController.inputName.keyup(function(e){
    		if(typeof mainCanvas.canvas.getActiveObject() != "undefined"){
    			leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).text = e.srcElement.value;
    			leftTree.treeView.findByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).find(".k-in").html(e.srcElement.value);
    		}
    	})
    }
    
    function inputZindexOnChange(){
    	
    	$("#zindex").blur();
    	if (mainCanvas.canvas.getActiveObject()){
    		mainCanvas.canvas.getActiveObject().set('zindex', sliderController.inputZindex.value());	
        	//_updateControls();
        	mainCanvas.canvas._objects.sort(function(a,b){return a.zindex-b.zindex;});
    		mainCanvas.canvas.renderAll();	
    	}
    }
    
    function inputGroupOnChange(){
    	
    	sliderController.inputGroup.keyup(function(e){
    		if(typeof mainCanvas.canvas.getActiveObject() != "undefined"){
    			leftTree.treeView.dataSource.getByUid(mainCanvas.canvas.getActiveObject().node[0].dataset.uid).group = sliderController.inputGroup.val();
    		}
    	})
    }
    
    
    function inputStateOnChange(){
    	
    	stateController.onChange();
    }
    
    function numericOpacityOnChange(){
    	
    	$("#numericOpacity").blur();
    	if (mainCanvas.canvas.getActiveObject()){
    		mainCanvas.canvas.getActiveObject().setOpacity(sliderController.numericOpacity.value());	
        	_updateControls();
    		mainCanvas.canvas.renderAll();	
    	}
    }
    
	
    function _enableAll(){

    	if(mainCanvas.canvas.getActiveGroup() == null){
	    	sliderController.container.find("input:not('#new-state-input'):not('[type=checkbox]')").attr("disabled",false);
	    	
	    	sliderController.checkboxDraggable.attr("disabled", false);
			sliderController.checkboxTouchable.attr("disabled", false);
	    }
		stateController.toggleInitSelector(true);
    	sliderController.positionXSlidder.enable();
		sliderController.positionYSlidder.enable();
		sliderController.scaleXSlidder.enable();
		sliderController.scaleYSlidder.enable();
		sliderController.angleSlidder.enable();
		sliderController.opacitySlidder.enable();
		sliderController.numericPositionX.enable();
		sliderController.numericPositionY.enable();
		sliderController.numericScaleX.enable();
		sliderController.numericScaleY.enable();
		sliderController.numericAngle.enable(); 
		sliderController.numericOpacity.enable(); 
		sliderController.inputZindex.enable();
    }
    
    function _disableAll(){   
    	sliderController.container.find("input:not('#new-state-input'):not('[type=checkbox]')").attr("disabled",true);
    	stateController.toggleInitSelector(false);
    	sliderController.container.find("input").val('');
    	
    	sliderController.positionXSlidder.disable();
		sliderController.positionYSlidder.disable();
		sliderController.scaleXSlidder.disable();
		sliderController.scaleYSlidder.disable();
		sliderController.angleSlidder.disable();
		sliderController.opacitySlidder.disable();
		sliderController.numericPositionX.enable(false);
		sliderController.numericPositionY.enable(false);
		sliderController.numericScaleX.enable(false);
		sliderController.numericScaleY.enable(false);
		sliderController.numericAngle.enable(false);
		sliderController.numericOpacity.enable(false);
		sliderController.checkboxDraggable.attr('checked', false).attr("disabled", true);
		sliderController.checkboxTouchable.attr('checked', false).attr("disabled", true);
		sliderController.inputZindex.enable(false);
    }

    
    function numericInputBlur(){
    	
    	if (!mainCanvas.canvas.getActiveGroup() && ($('#numericPositionX').val() != sliderController.numericPositionX.value())){
    		numericPositionXOnChange();
    	}
    	if ($('#numericPositionY').val() != sliderController.numericPositionY.value()){
    		numericPositionYOnChange();
    	}
    	if (!mainCanvas.canvas.getActiveGroup() && ($('#numericScaleX').val() != sliderController.numericScaleX.value())){
    		numericScaleXOnChange();
    	}
    	if ($('#numericScaleY').val() != sliderController.numericScaleY.value()){
    		numericScaleYOnChange();
    	}
    	if ($('#numericAngle').val() != sliderController.numericAngle.value()){
    		numericAngleOnChange();
    	}
    	if (!mainCanvas.canvas.getActiveGroup() && ($('#numericOpacity').val() != sliderController.numericOpacity.value())){
    		numericOpacityOnChange();
    	}
    	
    }
    
	this.init = _init;
	this.updateControls = _updateControls;
	this.enableAll = _enableAll;
	this.disableAll = _disableAll;	
	this.numericInputBlur = numericInputBlur;
}